<template>
    <div class="layout">
        <router-view></router-view>
        <footer>
            <div>
              <router-link active-class="active" to="/index">
                <i class="icon1"></i><p>首页</p>
              </router-link>
              <router-link active-class="active" to="/collect">
                <i class="icon2"></i><p>收藏</p>
              </router-link>
              <router-link active-class="active" to="/home">
                <i class="icon3"></i><p>我的</p>
              </router-link>
            </div>
        </footer>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
@import '../src/common/less/varible.less';
footer{
  position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    height: 60px;
    background-color: #f0f0f0;
  div{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    a{
      flex-basis: 33.33333%;
      flex-grow: 1;
      text-align: center;
      // 移除a标签在移动端的轻触高亮效果
      -webkit-tap-highlight-color: transparent;
      .icon1 {
        background-image: url(./assets/img/home.png);
      }
      .icon2 {
        background-image: url(./assets/img/like.png);
      }
      .icon3{
        background-image: url(./assets/img/people.png);
      }
      p{
        color: #ccc;
        font-size: 15px;
        font-family: cmfb;
      }
    }
    a.active{
      .icon1 {
        background-image: url(./assets/img/home_on.png);
      }
      .icon2{
        background-image: url(./assets/img/like_on.png);
      }
      .icon3{
        background-image: url(./assets/img/people_on.png);
      }
      p{
        color: @Color;
      }
    }
  }
}
  

  [class^="icon"] {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: cover;
 }
</style>